<!--
 * @Author: ningjz
 * @Date: 2022-03-17 09:46:00
 * @Description: 商品地区选择弹窗
-->
<template>
  <div class="box">
    <div @click="handBoxClick('close')" class="box-close">
      <el-icon><close /></el-icon>
    </div>
    <div class="box-con">
      <div class="con-top">
        <div class="con-til">
          <div class="til-type">
            <div />
            <span>品类选择</span>
          </div>
          <div class="til-warn">
            <el-icon><warning /></el-icon
            >{{
              state.topMsg === 5 ? '当前选择为多选可选择5类' : '当前选项为单选'
            }}
          </div>
        </div>
        <div class="con-sel">
          <div class="sel-item">
            <div class="item-til">已选择 :</div>
            <div class="item-nav">
              <span
                v-for="(item, index) in state.checkTopData.map((l) => l.name)"
                :key="index"
                class="item-con"
              >
                {{ item }}
              </span>
            </div>
          </div>
          <div class="sel-input">
            <el-input
              class="input"
              v-model="state.inputData"
              placeholder="请输入类名"
              clearable
              @clear="handInputSearch('')"
            />
            <button @click="handInputSearch(state.inputData)" class="btn">
              查找
            </button>
          </div>
        </div>
        <div class="con-itme">
          <el-checkbox-group
            v-model="state.checkTopchangeData"
            @change="handCheckChange('top')"
          >
            <el-checkbox
              class="check-item"
              v-for="item in state.checkTopList"
              :key="item.id"
              :label="item.id"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="con-btm">
        <div class="con-til">
          <div class="til-type">
            <div />
            <span>地区选择</span>
          </div>
          <div class="til-warn">
            <el-icon><warning /></el-icon
            >{{
              state.btmMsg === 3
                ? '当前选择为多选可选择3个地区'
                : '当前选项为单选'
            }}
          </div>
        </div>
        <div class="btm-item">
          <el-checkbox-group
            v-model="state.checkBtmData"
            @change="handCheckChange('btm')"
          >
            <el-checkbox
              class="check-item"
              v-for="item in state.checkBtmList"
              :key="item.value"
              :label="item.value"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="con-btn">
        <button @click="handBoxClick('confirm')">
          <el-icon><circle-check /></el-icon>
          确认
        </button>
        <button @click="handBoxClick('close')">
          <el-icon><circle-close /></el-icon>
          取消
        </button>
        <button @click="handBoxClick('reload')">
          <el-icon><refresh-right /></el-icon>
          重置
        </button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {
  CircleCheck,
  RefreshRight,
  CircleClose,
  Warning,
  Close
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { defineComponent, reactive, onMounted } from 'vue'
interface TItem {
  id?: string | number
  name: string
  value: string
  checked: string
}
interface IState {
  topMsg: number
  btmMsg: number
  inputData: string
  checkTopchangeData: number[]
  checkTopData: TItem[]
  checkTopList: TItem[]
  checkBtmData: string[]
  checkBtmList: TItem[]
}
export default defineComponent({
  components: {
    CircleCheck,
    RefreshRight,
    CircleClose,
    Warning,
    Close
  },
  props: {
    tableData: {
      type: Object,
      default: () => {
        return {
          doogs: [],
          area: []
        }
      }
    }
  },
  setup(props, { emit }) {
    const state: IState = reactive({
      //提示
      topMsg: 5,
      btmMsg: 1,
      // 查询
      inputData: '',
      // 商品
      checkTopchangeData: [],
      checkTopData: [],
      checkTopList: [],
      // 地区
      checkBtmData: [],
      checkBtmList: []
    })
    //选项发生变化
    const handCheckChange = (val: string) => {
      if (val === 'top') {
        if (
          state.topMsg === 5 &&
          state.checkTopchangeData.length > state.topMsg
        ) {
          //拦截
          state.checkTopchangeData.pop()
          ElMessage({
            message: '当前最多可选5类',
            showClose: true,
            offset: 130,
            duration: 2000,
            type: 'warning'
          })
          return
        } else if (state.topMsg === 1 && state.checkTopchangeData.length > 1) {
          state.checkTopchangeData.shift()
        }
        // 在已选择中回显选中的项
        state.checkTopData = []
        state.checkTopchangeData.forEach((item: any) => {
          state.checkTopData.push(state.checkTopList[item])
        })
      } else {
        // 拦截
        if (state.btmMsg === 3 && state.checkBtmData.length > state.btmMsg) {
          state.checkBtmData.pop()
          ElMessage({
            message: '当前最多可选3个地区',
            showClose: true,
            offset: 130,
            duration: 2000,
            type: 'warning'
          })
          return
        } else if (state.btmMsg === 1 && state.checkBtmData.length > 1) {
          state.checkBtmData.shift()
        }
      }
    }
    // 点击按钮(确认、取消(x)、重置)
    const handBoxClick = (val: string) => {
      if (val === 'confirm') {
        const goods: any = []
        const area: any = []
        state.checkTopList.forEach((item: any) => {
          if (state.checkTopchangeData.includes(item.id)) {
            item.checked = true
          } else {
            item.checked = false
          }
          goods.push(item)
        })

        state.checkBtmList.forEach((item: any) => {
          if (state.checkBtmData.includes(item.value)) {
            item.checked = true
          } else {
            item.checked = false
          }
          area.push(item)
        })
        emit('handTableClose', { goods, area })
        // 确认
      } else if (val === 'close') {
        // 取消
        emit('handTableClose', true)
      } else if (val === 'reload') {
        // 重置
        state.inputData = ''
        props.tableData.doogs.forEach((item: any, index: number) => {
          item.id = index
        })
        state.checkTopList = props.tableData.doogs
        state.checkTopData = state.checkTopList.filter((i: any) => i.checked)
        state.checkTopchangeData = state.checkTopData.map((i: any) => i.id)
        // 上-商品  <==>  下-地区
        state.checkBtmList = props.tableData.area
        state.checkBtmData = state.checkBtmList
          .filter((i: any) => i.checked)
          .map((i: any) => i.value)
      }
    }
    // 查询类名
    const handInputSearch = (val: string) => {
      if (val.length > 0) {
        state.checkTopList = state.checkTopList.filter(
          (i: any) => i.name.indexOf(val) > -1
        )
      } else {
        state.checkTopList = props.tableData.doogs
      }
    }
    onMounted(() => {
      // 提示
      if (props.tableData.type === '1') {
        state.topMsg = 5
        state.btmMsg = 1
      } else {
        state.topMsg = 1
        state.btmMsg = 3
      }

      // 商品
      props.tableData.doogs.forEach((item: any, index: number) => {
        item.id = index
      })
      state.checkTopList = props.tableData.doogs
      state.checkTopData = props.tableData.doogs.filter((i: any) => i.checked)
      state.checkTopchangeData = state.checkTopData.map((i: any) => i.id)

      // 地区
      state.checkBtmList = props.tableData.area
      state.checkBtmData = props.tableData.area
        .filter((i: any) => i.checked)
        .map((i: any) => i.value)
    })
    return {
      state,
      handBoxClick,
      handCheckChange,
      handInputSearch
    }
  }
})
</script>
<style lang="less" scoped>
.box {
  height: 100%;
  width: 100%;
  margin: 7px 0px -23px 8px;
  padding: 40px 60px 40px 50px;
  background: url('../../../../assets/images/table-bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  .box-close {
    cursor: pointer;
    position: absolute;
    right: 11px;
    top: 8px;
    font-size: 22px;
    color: #ccfdff;
    &:hover {
      color: #8ca8a8;
    }
  }
  .box-con {
    height: 100%;
    width: 100%;
  }
  .con-til {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .til-type {
      display: flex;
      align-items: center;
      color: #fdfeff;
      font-size: 20px;
      div {
        margin-right: 10px;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background-color: #65bdfb;
        border: 2px solid #fff;
      }
    }
    .til-warn {
      color: #65bdfb;
      font-size: 16px;
      display: flex;
      align-items: center;
      i {
        margin-right: 5px;
      }
    }
  }
  .btm-item {
    margin: 15px 0px;
  }
}
.con-top {
  height: 60%;
  padding-bottom: 40px;
  .con-sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .sel-item {
      width: calc(100% - 80px);
      display: flex;
      margin: 25px 0px;
      font-weight: bold;
      .item-til {
        white-space: nowrap;
        margin-left: 30px;
        color: #ace0ff;
        font-size: 21px;
      }
      .item-nav {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        height: 75px;
        .item-con {
          max-height: 33px;
          white-space: nowrap;
          font-size: 19px;
          margin: 2px 5px;
          color: #8eebfa;
          padding: 1px 10px;
          border-radius: 8px;
          background-color: #05428e;
          border: 2px solid #145c9b;
        }
      }
    }
    .sel-input {
      display: flex;
      .input {
        ::v-deep(.el-input__inner) {
          border-radius: 8px;
          color: rgba(255, 255, 255, 0.6);
          box-shadow: none !important;
          &::-webkit-input-placeholder {
            color: #76bdf8;
          }
        }
      }
      .btn {
        width: 70px;
        background: #004096;
        color: #76bdf8;
        font-weight: bold;
        font-size: 15px;
        box-shadow: none;
        border: 1px solid #1961cb;
        border-radius: 8px;
        margin-left: 7px;
      }
    }
  }
  .con-itme {
    width: 100%;
    height: calc(100% - 120px);
    background-color: #053481;
    overflow: auto;
  }
}
.con-btn {
  display: flex;
  justify-content: center;
  margin-top: 45px;
  button {
    cursor: pointer;
    background: #14519c;
    padding: 6px 15px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 7px #297eea inset;
    border: 1px solid transparent;
    margin: 0px 10px;
    display: flex;
    align-items: center;
    font-size: 18px;
    i {
      font-size: 19px;
      margin-right: 5px;
    }
  }
}
::v-deep(.el-checkbox) {
  margin: 13px;
}
::-webkit-scrollbar-thumb {
  background-color: #0f69d7;
}
::-webkit-scrollbar {
  width: 8px;
}
</style>
